<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
    <link rel="stylesheet" href="/stylesheets/side-menu.css">
    <script src="/javascripts/sigma/sigma.min.js"></script>
    <script src="/javascripts/sigma/plugins/sigma.parsers.json.min.js"></script>
    <script src="/javascripts/sigma/plugins/sigma.layout.forceAtlas2.js"></script>
    <script src="/javascripts/sigma/plugins/sigma.plugins.animate.min.js"></script>
    <script src="/javascripts/jquery.min.js"></script>

</head>
<body>

<% include statsabove %>

<div id="layout">
    <!-- Menu toggle -->
    <a href="#menu" id="menuLink" class="menu-link">
        <!-- Hamburger icon -->
        <span></span>
    </a>

    <%- include('components/common/menu') %>

    <div id="content">
          <div id="welcomemessage" style="background: white;">
              <p class="large-caption">Please, enter your username or your email to recover your password.</p>
                <p class="medium-caption">If you have several accounts with the same e-mail, you will need to enter both your username and the email. Usernames are case-sensitive.</p>

              <% include messages %>

              <div class="warning" id="errors"></div>

                <form action='/recover' id="recovery_form" method='post' class="pure-form pure-form-stacked">


                    <p>
                        <input type='text' name='username' id="username" placeholder='username' />
                    </p>
                    <p>
                        <input type='email' name='email' placeholder='email' />
                    </p>


                    <p>
                        <button type='submit' id='register' class="pure-button pure-button-primary">recover password</button>
                    </p>
                </form>
                <br>
                <div id="message" class="small-caption"></div>

          </div>
          <div id="graph-container" style="background: white;"></div>

    </div>

</div>

<script src="/javascripts/ui.js"></script>


<script>
;(function(){

    var jsonpath = '/files/signup.json';





// Add a method to the graph model that returns an
// object with every neighbors of a node inside:

    sigma.classes.graph.addMethod('neighbors', function(nodeId) {
        var k,
                neighbors = {},
                index = this.allNeighborsIndex[nodeId] || {};

        for (k in index)
            neighbors[k] = this.nodesIndex[k];

        return neighbors;
    });

// Initialize JSON parser for SIGMA visualization

    sigma.parsers.json(
            jsonpath,
            {
                container: 'graph-container',
                renderer: {
                    container: document.getElementById('graph-container'),
                    type: 'canvas'
                },
                settings: {
                    minNodeSize: 1,
                    maxNodeSize: 13,
                    minEdgeSize: 0.5,
                    maxEdgeSize: 2,
                    labelThreshold: 21
                }
            },
            function(sigma) {

                var i,
                        timeout = 4000,
                        nodes = sigma.graph.nodes(),
                        color_context = '#888',
                        color_addcontext = '#666688',
                        len = nodes.length;


                // This is a fix for JSON
                // Sigma requires that nodes have X, Y, Size and Color properties which our JSON doesn't have. So we add them.
                // We also make the initial graph layout circular, so that ForceAtlas always looks the same

                for (i = 0; i < len; i++) {
                    var angle = Math.PI * 2 * i / len;
                    nodes[i].x = Math.cos(angle);
                    nodes[i].y = Math.sin(angle);
                    nodes[i].size = sigma.graph.degree(nodes[i].id);
                    nodes[i].color = color_context;
                }


                // Do ForceAtlasLayout

                sigma.startForceAtlas2();

                // Don't run it forever not to overheat :)

                setTimeout(function() {
                    sigma.stopForceAtlas2();
                },timeout);




                // Zoom Graph Control

                var c = sigma.camera;


                $("#zoom-in").on('click', function(e) {
                    // Zoom in - single frame :
                    c.goTo({
                        ratio: c.ratio / c.settings('zoomingRatio')
                    });
                });

                $("#zoom-out").on('click', function(e) {
                    // Zoom out - single frame :
                    c.goTo({
                        ratio: c.ratio * c.settings('zoomingRatio')
                    });
                });




            }
    );


    $(document).ready(function(){
    function getUrlVars()
    {
        var vars = [], hash;
        var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
        for(var i = 0; i < hashes.length; i++)
        {
            hash = hashes[i].split('=');
            vars.push(hash[0]);
            vars[hash[0]] = hash[1];
        }
        return vars;
    }

    var redirect = getUrlVars()["redirect"];

    var login = getUrlVars()["login"];

    $('#redirect').val(redirect);

    $('#username').val(login);

    <% if (errormsg) { %>
      $('#errors').html("<%=errormsg%>");
    <% } %>


    });

    document.addEventListener("DOMContentLoaded", function() {



        $("#register").click(function(event){


          event.preventDefault();

          $('#register').prop('disabled', true);
          $('#message').html('Please, wait, you will receive a link to recover your password...');


          $.post('/recover', $("#recovery_form").serialize())
                  .done(function(res) {
                      if (res.errormsg) {
                        $('#errors').html(res.errormsg);
                        $('#message').html('');
                        if (!res.success) {
                          $('#register').prop('disabled', false);
                        }
                      }
                      else if (res.moveon) {
                        window.location.href = res.moveon;
                      }
                      else {
                        $('#errors').html('All good processing');
                        $('#message').html('Getting there...');
                        $('#register').prop('disabled', false);
                      }

                  })
                  .fail(function(res) {
                      console.log(res);
                  });




          });



    });




})();


</script>

<% include statsbelow %>

</body>
</html>
